<template>
    <div>
    <Tables 
      :pageNum="pageNum" 
      :pageSize="pageSize" 
      :total="total" 
      :cols="cols" 
      :data="tableData"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      >
      
    </Tables>
    
    </div>
</template>

<script>
import { getUserList } from "../../http/index.js";
import Tables from "../../components/table.vue";
export default {
  components: { Tables },
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      cols: [
        {
          label: "id",
          name: "id"
        },
        {
          label: "用户名",
          name: "username"
        },
        {
          label: "邮箱",
          name: "email"
        },
        {
          label: "电话",
          name: "phone"
        },
        {
          label: "注册时间",
          name: "createTime",
        }
      ]
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    async getUser() {
      let res = await getUserList({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
      console.log(res);
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      
      this.pageSize = val;
      console.log(this.pageSize);
      getUserList({ pageSize: this.pageSize }).then(res => {
        console.log("111", res);
        this.tableData = res.data.data.list;
      });
    },
    handleCurrentChange(val) {
     
      this.pageNum = val;
      console.log(this.pageNum);
      getUserList({ pageNum: this.pageNum }).then(res => {
        console.log("222", res);
        this.tableData = res.data.data.list;
      });
    }
  }
};
</script>

<style lang="scss" >
</style>